<template>
	<view class="index">
		<!-- 游戏列表 -->
		<view class="index-list">
			<navigator class="game-item flexItems u-rela" :url="item.path" v-for="(item,index) in list" :key="index">
				<u-image :src="item.image" width="140rpx" height="140rpx" :fade="false"></u-image>
				<view class="flex1 u-p-l-30 z-t-c">
					<view class="game-item-title">{{item.title}}</view>
					<view class="u-font-24 u-m-t-10 c757575">{{item.text}}</view>
				</view>
				<view class="game-item-tag z-c-success" v-if="item.tag == 0">已完成</view>
				<view class="game-item-tag z-c-warning" v-if="item.tag == 1">待优化</view>
				<view class="game-item-tag z-c-progress" v-if="item.tag == 2">进行中</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// tag:	 0=完成   1=待优化   2=未完成   3=进行中
				list:[
					{image: '/static/image/home/index-chess.png', title: '激情五子棋', text: '与AI来一场激情对决吧', path: '/pages/games/chess', tag: 0},
					{image: '/static/image/home/index-snake.png', title: '疯狂贪吃蛇', text: '胃口虽好 可别贪吃', path: '/pages/games/snake', tag: 1},
					{image: '/static/image/home/index-bird.png', title: '管道像素鸟', text: '向前飞 飞越前方阻碍', path: '/pages/games/bird', tag: 1},
					{image: '/static/image/home/index-tetris.png', title: '俄罗斯方块', text: '块块堆叠起来的童年', path: '/pages/games/tetris', tag: 2},
					{image: '/static/image/home/index-bomb.png', title: '经典版扫雷', text: '横扫地雷，做回自己', path: '/pages/games/bomb', tag: 0},
					{image: '/static/image/home/index-number.png', title: '数字华容道', text: '一起来体验数字的美妙', path: '/pages/games/number', tag: 0},
				]
			}
		},
	}
</script>

<style>
	page{background-color: #F3F2F7;}
</style>
<style lang="scss" scoped>
.index{
	padding: 60rpx;
}
.game-item{
	padding: 14rpx 80rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 4rpx 10rpx 0rpx rgba(0,0,0,.1);
	.game-item-title{
		font-size: 40rpx; font-weight: 600;
	}
	.game-item-tag{
		position: absolute; right: 0; top: 0; z-index: 10; font-size: 24rpx;padding: 4rpx 10rpx;
		border-radius: 0 20rpx 0 10rpx;
	}
}
.z-c-success{background-color: #71d5a1;color: #fff;}
.z-c-error{background-color: #fab6b6;color: #fff;}
.z-c-warning{background-color: #fcbd71;color: #fff;}
.z-c-progress{background-color: #a0cfff;color: #fff;}
</style>
